<template>
    <div>
        User组件--{{ count }}
        <br>
        <br>
        <ul>
            <li v-for="(item, index) in list" :key=index>
                {{ item }}
            </li>
        </ul>
        <br>
        <br>
        <br>
        <button @click="incCount">执行vuex里面的方法 改变count</button>

        <br>
        <br>
        <button @click="setCount">执行vuex里面的方法 传值</button>
        <br>
        <br>
        <hr>
        <br>
        <br>

        获取getters里面的数据
        <br>
        {{ reverseMsg }}
        <br>
        <br>
        {{ num }}

        <button @click="setMsg">改变state里面的msg</button>

        <br>
        <br>
        <hr>
        <br>
        <br>
        触发action里面的方法
        <br>
        <br>
        <button @click="$store.dispatch('incCount')">Action incCount</button>

        <br>
        <br>
        <button @click="setActionMsg">Action setMsg</button>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import { mapState, mapGetters } from "vuex";
export default defineComponent({
    methods: {
        incCount() {
            this.$store.commit('incCount')
        },
        setCount() {
            this.$store.commit('setCount', 15)
        },
        setMsg() {
            this.$store.commit('setMsg', "你好我是改变后的数据")
        },
        setActionMsg() {
            this.$store.dispatch('setMsg', "改变后的数据-action")
        }
    }, computed: {
        ...mapState(['count', 'list']),
        ...mapGetters(['reverseMsg', 'num'])
        //另一种写法
        // ...mapGetters({
        //    revmsg:"reverseMsg"
        // })
    },
})
</script>

<style lang="scss">
//cnpm install -D sass-loader node-sass</style>